<template>
    <!-- logo和搜索框 -->
    <LogoAndSearch></LogoAndSearch>

    <!-- 顶部信息栏 -->
    <TopInfo></TopInfo>

    <!-- 导航菜单栏 -->
    <NavMenu></NavMenu>
    <div style="display: flex;height: 80px;width: 60%;position: absolute;left: 20%;top: 22%;">
        <div class="div1">
            <el-icon>
                <User />
            </el-icon>人脸找回
        </div>
        <div class="div1" style=" background-color: rgb(102,200,232);">
            <el-icon>
                <Iphone />
            </el-icon>手机找回
        </div>
        <div class="div1">
            <el-icon>
                <Message />
            </el-icon>邮箱找回
        </div>


    </div>
    <div class="main">

        <el-steps :active="active" finish-status="success">
            <el-step title="填写账户信息" />
            <el-step title="获取验证码" />
            <el-step title="获取验证码" />
            <el-step title="完成" />
            
        </el-steps>
        <el-button style="margin-top: 12px" @click="next">Next step</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import NavMenu from '../components/home/NavMenu.vue'
import TopInfo from '../components/home/TopInfo.vue'
import LogoAndSearch from '../components/home/LogoAndSearch.vue'
import { Iphone, Message, User } from '@element-plus/icons-vue'


const active = ref(0)
const next = () => {
  if (active.value++ > 3) active.value = 0
}
</script>

<style scoped>
.main {
    height: 400px;
    width: 57.3%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 20%;
    top: 32%;
    border: 1px solid rgb(41, 140, 206);
    padding:20px;
}

.div1 {
    height: 80px;
    width: 60%;
    background-color: rgb(41, 140, 206);
    font-size: 25px;
    text-align: center;
    line-height: 90px;
    color: white;
}

.el-icon {
    font-size: 30px;
}
</style>
